<template>
  <div class="common-layout">
    <RouterView />
    <van-tabbar v-model="active">
      <van-tabbar-item
        v-for="item in router.options.routes[0].children"
        :key="item.path"
        :icon="item.meta.icon"
        :url="`#/${item.path}`"
        >{{ item.meta.name }}</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script setup>
// imports and composables
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const active = ref(0);
const router = useRouter();
const route = useRoute();
// const roterArr = router.options.routes[0].children;
// console.log(route, "route");
onMounted(() => {
  const data = router.options.routes[0];
  active.value = data.children.findIndex((item) => {
    return "/" + item.path === route.path;
  });
});
</script>

<style scoped>
/* styles */
</style>